<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>ugo详情页</title>


    <!-- 自己的css 文件-->
    <link rel="shoutcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/product.css">
    <link rel="stylesheet" href="css/common.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

  </head>
  <body>
      <!--header公共部分开始-->
<!--shortcut 通栏开始-->
<div class="ugo_index">
    <div class="ugo_index_shortcut w clearfix">
        <div class="short_left lf">
            <ul>
                <li><a href="javascript:void(0)" class="left_a">时尚商城</a></li>
                <li><a href="javascript:void(0)" class="left_b" id="short_left_b">首尔站</a></li>
                <li class="left_li"><a href="javascript:void(0)" class="left_c"><i class="iconfont">&#xe601;</i>手机优购<i class="iconfont icon_sj">&#xe673;</i></a>
                      <span class="yougou_phone clearfix">
                          <s><i></i><a href="" class="pa1"></a><a href="" class="pa2"></a></s>
                          <p>下载安装 <strong>优购客户端</strong></p>
                      </span>
                </li>
            </ul>
        </div>
        <div class="short_right fr">
            <ul>
                <li class="right_a"><a href="login.html">登录</a>&nbsp;&nbsp;&nbsp;<a href="regist.html">注册</a> <span></span></li>
                <li class="right_b"><a href="">我的优购</a><i class="iconfont icon_sj">&#xe673;</i>
                    <span class="right_s2"><a href="">我的收藏</a></span>
                </li>
                <li><a href="">我的订单</a>
                </li>
                <li class="right_c"><a href="">帮助中心</a><i class="iconfont icon_sj">&#xe673;</i>
                    <span class="right_s4"><a href="">客服支持</a></span>
                </li>
                <li class="right_d"><a href="">更多</a><i class="iconfont icon_sj">&#xe673;</i>
                    <span class="right_s5"><a href="">收藏优购</a><a href="">我的帮助</a></span>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--shortcut 通栏结束-->
<!--logo搜索开始-->
<div class="ugo_index_logo" id="top">
    <div class="index_logo w clearfix ">
        <div class="logo">
            <a href="" title="爱生活爱优购">优购</a>
        </div>
        <div class="search clearfix">
            <input type="text" placeholder="搜索商品"/>
            <div class="btn"><i class="iconfont">&#xe60a;</i>&nbsp;搜索</div>
            <div class="hotwords">
                <a href="#" class="col_red">热销</a>&nbsp;|
                <a href="#">专柜同款</a>&nbsp;|&nbsp;
                <a href="#">定金膨胀</a>&nbsp;|&nbsp;
                <a href="#">领免息券</a>&nbsp;|&nbsp;
                <a href="#" class="col_red">9.9免邮</a>&nbsp;|&nbsp;
                <a href="#">数码1元</a>
            </div>
        </div>
        <div class="car"><a href="shoppingCar.html"><i></i>我的购物车</a></div>
    </div>
</div>
<!--logo搜索结束-->
<!--nav导航栏开始-->
<div class="ugo_index_nav">
    <div class="w clearfix">
        <div class="nav_left">
            <div class="nav_left_all">
                <i></i>
                <h2><a href="#">商品分类</a></h2>
                <div class="nla_box">
                    <div class="nla_box_k"></div>
                    <div class="nla_box1">
                        <ul>
                            <li>
                                <a href="#">母婴用品</a>
                            </li>
                            <li>
                                <a href="#">美容个护</a>
                            </li>
                            <li>
                                <a href="#">营养保健</a>
                            </li>
                            <li>
                                <a href="#">箱包手袋</a>
                            </li>
                            <li>
                                <a href="#">服饰鞋帽</a>
                            </li>
                        </ul>
                    </div>
                    <div class="nla_box2">
                        <ul>
                            <li>
                                <div>
                                    <span>奶粉</span>
                                    <a href="">尿不湿</a>
                                    <a href="">婴儿车</a>
                                    <a href="">爽肤水</a>
                                    <a href="">面露</a>
                                    <a href="">眼部护理</a>
                                    <a href="">护肤套装</a>
                                    <a href="">手部护理</a>
                                    <a href="">儿童护肤</a>
                                    <a href="">身体护理</a>
                                    <a href="">面部护肤</a>
                                    <a href="">防晒修复</a>
                                    <a href="">止汗脱毛</a>
                                </div>
                                <div>
                                    <span>童装</span>
                                    <a href="">花印</a>
                                    <a href="">奶嘴</a>
                                    <a href="">Elizavecca</a>
                                    <a href="">磨牙棒</a>
                                    <a href="">森田药妆</a>
                                    <a href="">REGEN</a>
                                    <a href="">SNP</a>
                                    <a href="">丽得姿</a>
                                    <a href="">痱子粉</a>
                                    <a href="">THE BODY SHOP</a>
                                    <a href="">我的新机</a>
                                    <a href="">BEYOND</a>
                                    <a href="">其他面膜</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span>护肤</span>
                                    <a href="">洁面</a>
                                    <a href="">卸妆</a>
                                    <a href="">爽肤水</a>
                                    <a href="">面露</a>
                                    <a href="">眼部护理</a>
                                    <a href="">护肤套装</a>
                                    <a href="">手部护理</a>
                                    <a href="">男士护肤</a>
                                    <a href="">身体护理</a>
                                    <a href="">面部护肤</a>
                                    <a href="">防晒修复</a>
                                    <a href="">止汗脱毛</a>
                                </div>
                                <div>
                                    <span>面膜</span>
                                    <a href="">花印</a>
                                    <a href="">悦诗风吟</a>
                                    <a href="">Elizavecca</a>
                                    <a href="">自然晨露</a>
                                    <a href="">森田药妆</a>
                                    <a href="">REGEN</a>
                                    <a href="">SNP</a>
                                    <a href="">丽得姿</a>
                                    <a href="">我的美丽日记</a>
                                    <a href="">THE BODY SHOP</a>
                                    <a href="">我的新机</a>
                                    <a href="">BEYOND</a>
                                    <a href="">其他面膜</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span>保健</span>
                                    <a href="">洁面</a>
                                    <a href="">卸妆</a>
                                    <a href="">爽肤水</a>
                                    <a href="">面露</a>
                                    <a href="">按摩</a>
                                    <a href="">护肤套装</a>
                                    <a href="">手部护理</a>
                                    <a href="">刮痧片</a>
                                    <a href="">身体护理</a>
                                    <a href="">面部护肤</a>
                                    <a href="">防晒修复</a>
                                    <a href="">止汗脱毛</a>
                                </div>
                                <div>
                                    <span>山药</span>
                                    <a href="">花印</a>
                                    <a href="">悦诗风吟</a>
                                    <a href="">Elizavecca</a>
                                    <a href="">自然晨露</a>
                                    <a href="">森田药妆</a>
                                    <a href="">REGEN</a>
                                    <a href="">SNP</a>
                                    <a href="">丽得姿</a>
                                    <a href="">脑白金</a>
                                    <a href="">THE BODY SHOP</a>
                                    <a href="">我的新机</a>
                                    <a href="">BEYOND</a>
                                    <a href="">其他面膜</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span>箱包</span>
                                    <a href="">洁面</a>
                                    <a href="">卸妆</a>
                                    <a href="">爽肤水</a>
                                    <a href="">面露</a>
                                    <a href="">眼部护理</a>
                                    <a href="">护肤套装</a>
                                    <a href="">手部护理</a>
                                    <a href="">男士护肤</a>
                                    <a href="">身体护理</a>
                                    <a href="">面部护肤</a>
                                    <a href="">防晒修复</a>
                                    <a href="">止汗脱毛</a>
                                </div>
                                <div>
                                    <span>便携袋</span>
                                    <a href="">花印</a>
                                    <a href="">悦诗风吟</a>
                                    <a href="">Elizavecca</a>
                                    <a href="">自然晨露</a>
                                    <a href="">森田药妆</a>
                                    <a href="">REGEN</a>
                                    <a href="">SNP</a>
                                    <a href="">丽得姿</a>
                                    <a href="">我的美丽日记</a>
                                    <a href="">THE BODY SHOP</a>
                                    <a href="">我的新机</a>
                                    <a href="">BEYOND</a>
                                    <a href="">其他面膜</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <span>爆款</span>
                                    <a href="">洁面</a>
                                    <a href="">卸妆</a>
                                    <a href="">爽肤水</a>
                                    <a href="">面露</a>
                                    <a href="">眼部护理</a>
                                    <a href="">护肤套装</a>
                                    <a href="">手部护理</a>
                                    <a href="">男士护肤</a>
                                    <a href="">身体护理</a>
                                    <a href="">面部护肤</a>
                                    <a href="">防晒修复</a>
                                    <a href="">止汗脱毛</a>
                                </div>
                                <div>
                                    <span>鸭舌帽</span>
                                    <a href="">花印</a>
                                    <a href="">悦诗风吟</a>
                                    <a href="">Elizavecca</a>
                                    <a href="">自然晨露</a>
                                    <a href="">森田药妆</a>
                                    <a href="">REGEN</a>
                                    <a href="">SNP</a>
                                    <a href="">丽得姿</a>
                                    <a href="">我的美丽日记</a>
                                    <a href="">THE BODY SHOP</a>
                                    <a href="">我的新机</a>
                                    <a href="">BEYOND</a>
                                    <a href="">其他面膜</a>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav_right">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">今日限时购</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="#">每日上新</a></li>
                <li><a href="#">国家馆</a></li>
                <li><a href="#">韩国精选</a></li>
                <li><a href="#">日本优品</a></li>
            </ul>
        </div>
    </div>
</div>
<!--_nav导航栏结束-->
<!--header公共部分结束-->
    <div class="ugo_product w clearfix">
       <!--详情页 头部 导航条-->
        <div class="ugo_product_top fl">
            <ul>
                <li><a href="">首页</a><span>></span></li>
                <li><a href="">美容个护</a><span>></span></li>
                <li><a href="">面部清洁</a><span>></span></li>
                <li><a href="">洗面奶</a><span>></span></li>
                <li><a href="">资深堂</a></li>
            </ul>   
        </div>
        <!--产品信息 ，价格 ，购买页面-->
        <div class="ugo_product_main fl">
            <div class="left fl">

                <!--   放大镜原图    -->
                <div class="top m" id="enlarge">
                    <img src="images/product-large.png" alt="" id="banner_img">
                    <div class="mask"></div>
                </div>
                <!--   放大镜放大图   -->
                <div class="big" id="big">
                    <img src="images/product-large.png" width="211" height="545" alt=""/>
                </div>
                <!-- 产品 整体 拍摄-->
                <div class="bottom m">
                 <!-- 左轮播-->
                   <div class="fl" id="ugo_product_banner_left"> < </div>
                  <!-- 照片-->
                   <div class="fl"  id="banner_ul_border">
                      <ul id="banner_ul">
                        <li><a href="images/product-large.png" alt=""><img src="images/product-large.png" width="100" alt="产品3"/></a></li>
                        <li id="banner_width"><a href="images/mom1.png" alt=""><img src="images/mom1.png" width="100" alt="产品1"/></a></li>
                        <li><a href="images/tehui1.png" alt=""><img src="images/tehui1.png" width="100" alt="产品2"/></a></li>
                        <li><a href="images/mom1.png" alt=""><img src="images/mom1.png" width="100" alt="产品3"/></a></li>
                        <li><a href="images/tehui1.png" alt=""><img src="images/tehui1.png" width="100" alt="产品3"/></a></li>
                      </ul>
                   </div>
                    <!--右轮播-->
                    <div class="fr" id="ugo_product_banner_right"> > </div>
                </div>
                
            </div>
            <div class="right fr">
                <h2>青葱季超绵密泡泡 深层清洁美白清爽保湿控油女士洗面奶</h2>
                <div class="sale">
                    <div class="left fl">
                        <p><span>优惠券</span></p>
                        <p>价格</p>
                        <p>促销价</p>
                    </div>
                    <div class="right fl">
                        <p>优购食物商品通用<s> > </s><span class="qulingquan">去领券</span></p>
                        <p>￥89.00</p>
                        <p><span>￥</span><span>69.00</span><span>限时抢购</span></p>
                        <div></div>
                        <p>优购手机客户端购买更优惠 <span>每单随机减</span></p>
                    </div>
                </div>
                
                <p class="sale_p1"><span class="sale_p_span1">税费</span><span>[包税]</span>有优购承担，运输过程中产生的税费，可能要去当地海关办理</p>
                <p><span class="sale_p_span1">运费</span><span>[包邮]</span>优购香港仓库直邮</p>
                <div class="sale_data">
                    <div class="left fl">月销量<span>8765</span></div>
                    <div class="center fl">累计评价<span>52146</span></div>
                    <div class="right fl">送优购积分<span>30</span></div>
                </div>
                <div class="sale_num">
                    <div class="left fl">
                        <p>化妆品净含量</p>
                        <p>数量</p>
                    </div>
                    <div class="right fl">
                        <span>120g/ml</span>
                        <div class="add-del fl">
                            <div class="add_button fl">
                                <button class="fl" id="btn1">-</button>
                                <span id="btnText">1</span>
                                <button class="fr" id="btn2">+</button>
                            </div>

                            <span class="one_jian fr">件</span>
                        </div>

                    </div>


                </div>
                <div class="buy_button ">
                    <button>立即购买</button>
                    <button>加入购物车</button>
                </div>
                
            </div>
        </div>
        
       <!-- 猜您喜欢-->
        <div class="guess_youLike fl">
            <h2 class="">
                <span>猜您喜欢</span>
                <span class="fr"><s><img src="images/sousuo.png"></s> 换一换 </span>
            </h2>
            
            <div>
                <a href=""><img src="images/guessLike.png" width="75px" height="180px" alt=""></a>
                <p>资深堂清爽控油洁面乳150ml</p>
                <p>￥<span>39.00</span></p>
            </div>
            <div>
                <a href=""><img src="images/guessLike.png" width="75px" height="180px" alt=""></a>
                <p>资深堂清爽控油洁面乳150ml</p>
                <p>￥<span>39.00</span></p>
            </div>
            <div>
                <a href=""><img src="images/guessLike.png" width="75px" height="180px" alt=""></a>
                <p>资深堂清爽控油洁面乳150ml</p>
                <p>￥<span>39.00</span></p>
            </div>
            <div>
                <a href=""><img src="images/guessLike.png" width="75px" height="180px" alt=""></a>
                <p>资深堂清爽控油洁面乳150ml</p>
                <p>￥<span>39.00</span></p>
            </div>
            <div>
                <a href=""><img src="images/guessLike.png" width="75px" height="180px" alt=""></a>
                <p>资深堂清爽控油洁面乳150ml</p>
                <p>￥<span>39.00</span></p>
            </div>
        </div>
        <!--商 品 详情 ，评价-->
        <div class="judgement fl clearfix">
            <div class="top">
               <a href="#details"><span>商品详情</span></a>
               <a href="#advise"><span>商品评价</span></a>
            </div>
             <!--商品详情模块-->
            <div class="details" id="details">
                <div class="main_title">
                    <div class="border fl"></div>
                    <div class="text">商品详情</div>
                </div>
                <img src="images/productLarge.png" alt="">
            </div>
            <!--商品评价-->
           <div class="advise" id="advise">  
           </div>            
        </div>
    </div>
<!--  标语 slogan Start -->
        <div class="ugo_list_slogan w">
            <h2>上优购 购在全球 尽享优惠</h2>
            <div class="footer_img"><img src="images/slogan.png" alt="slogan"></div>
        </div>
        <!--  标语 slogan End -->
<!--footer开始-->
    <div class="ugo_footer ">
    <div class="w ">
        <div class="footerwap clearfix">
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">注册与登录</a></dd>
                <dd><a href="#">账户信息维护</a></dd>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">会员体系</a></dd>
                <dd><a href="#">常见问题</a></dd>
            </dl>
            <dl>
                <dt>订单服务</dt>
                <dd><a href="#">订单状态说明</a></dd>
                <dd><a href="#">自动取消订单</a></dd>
                <dd><a href="#">上传身份证</a></dd>
            </dl>
            <dl>
                <dt>支付与配送</dt>
                <dd><a href="#">支付方式</a></dd>
                <dd><a href="#">优惠券和红包</a></dd>
                <dd><a href="#">如何提现</a></dd>
                <dd><a href="#">配送方式</a></dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd><a href="#">消费维权</a></dd>
                <dd><a href="#">纠纷处理</a></dd>
                <dd><a href="#">退货规则</a></dd>
            </dl>
            <div class="footer_title">
                <a href="#" class="footer_logo">优购</a>
                <p>关注我们</p>
                <a href="#" class="footer_wx" title="微信">微信</a>
                <a href="#" class="footer_wb" title="微博">微博</a>
            </div>
        </div>
        <div class="footerlink">
            <a href="#">关于我们</a>|<a href="#">联系我们</a>| <a href="#">商家入驻</a>|<a href="#">商家入驻</a>| <a href="#">商家入驻</a>| <a href="#">商家入驻</a>|<a href="#">商家入驻</a>
        </div>
    </div>
    </div>

    <!--footer结束-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="lib/jquery.js"></script>

    <!--  自己的 js 代码  -->
    <script src="js/product.js"></script>
  </body>
</html>


    
